/**
 * Created by levy on 16/8/1.
 */
import {shopping} from "../const/shopping";
import AddressDetail from "../components/shopping/AddressDetail";

const lf = liefeng,
    R = React,
    RC = React.createClass,
    log = lf.utils.log,
    ajax = lf.utils.ajax,
    apiPrefix = shopping.api.prefix,
    api = shopping.api.address,
    actionUrl = 'shopping-address-manage-edit.html';

/**
 * props
 *  userId
 *  data
 *  index
 *  getList
 */
const Address = RC({
    componentDidMount() {
        let $checkbox = $('.checkbox'),
            me = this;
        
        R.findDOMNode(this.refs.checkbox).addEventListener('touchend', function () {
            let $me = $(this);
            
            if (!$me.hasClass('active')) {
                
                $me.toggleClass('active');
                $checkbox.not($me).removeClass('active');
                
                ajax({
                    type: 'post',
                    url: apiPrefix + api.setDefault,
                    data: {
                        custGlobalId: me.props.globalId,
                        addressId: me.props.data.id,
                    }
                }, null, () => me.props.getList());
            }
            
        });
        
        R.findDOMNode(this.refs.edit).addEventListener('touchend', function () {
            lf.appJs.doAction(actionUrl + '?addressId=' + me.props.data.id, '编辑地址');
        });
        
        R.findDOMNode(this.refs.delete).addEventListener('touchend', () => {
            if (parseInt(this.props.data.isDefault)) {
                alert('默认地址不能删除');
                return;
            }
            
            lf.appJs.confirm('确认删除吗?', () => {
                ajax({
                    type: 'post',
                    url: apiPrefix + api.delete,
                    data: {
                        addressId: this.props.data.id,
                    }
                }, null, () => this.props.getList())
            })
        });
    },
    render() {
        let props = this.props,
            data = props.data,
            isDefault = parseInt(data.isDefault);
        
        return <div className={props.index ? 'split-line' : ''}>
            <AddressDetail data={data} addClass="border-bottom"
                           addComponent={
                    isDefault ? <span className="is-default shopping-red-bg">默认</span> : ''
                }/>
            <div className="status flex space-between">
                <div>
                    <span className={"checkbox " + (isDefault ? 'active' : '')} ref="checkbox"/>
                    <span className="text-gray">默认地址</span>
                </div>
                <div>
                    <span className="mui-icon mui-icon-compose" ref="edit">编辑</span>
                    <span className="mui-icon mui-icon-trash" ref="delete">删除</span>
                </div>
            </div>
        </div>
    }
});

/**
 * props
 *  user
 */
const Root = RC({
    getInitialState() {
        return {
            addressList: [],
        }
    },
    getList(updateUser) {
        ajax({
            url: apiPrefix + api.list,
            data: {
                custGlobalId: this.props.user.globalId || (this.props.user.custLoginVo && this.props.user.custLoginVo.globalId),
            }
        }, null, list => {
            this.setState({
                addressList: list.map((data, i) => {
                    // TODO
                    //一样的key是不会重复渲染的
                    return <Address key={"address-" + (data.id || i)}
                                    globalId={this.props.user.globalId ||
                                    (this.props.user.custLoginVo && this.props.user.custLoginVo.globalId)}
                                    data={data} index={i}
                                    getList={this.getList}/>
                })
            });
        })
    },
    componentWillMount() {
        let me = this;
        me.getList();
        lf.appJs.refresh(() => {
            me.getList();
        });
    },
    componentDidMount() {
        R.findDOMNode(this.refs.addAddress).addEventListener('touchend', function () {
            lf.appJs.doAction(actionUrl, '新建地址');
        });
    },
    render() {
        let st = this.state;
        
        return <div className="address-manage">
            {st.addressList}
            <div className="btn-wrapper">
                <div className="btn shopping-red-bg" ref="addAddress">
                    <span className="mui-icon mui-icon-plusempty"/>
                    <span>新建地址</span>
                </div>
            </div>
        </div>
    }
});

lf.appJs.getUser(function (user) {
    R.render(<Root user={user}/>, document.getElementById('root'));
});